  <style type="text/css">
table, td{
	width: 600px;
	font-family: Arial;
	font-size: 13px;
	text-align:center;
	border-spacing: 10px;
	margin: 0 auto;
	color: #006666;
}

th{
	color:#006666;
	text-align:center;
}

  </style>


<!--<table> 
<tr>
<th>Donut Sabor</th> 
<th>Donut Sabor</th> 
<th>Donut Sabor</th> 
</tr>
<tr> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
</tr> 
<tr> 
<td>R$ 0,00</td> 
<td>R$ 0,00</td> 
<td>R$ 0,00</td>  
</tr>
<tr>
<td><input type="Submit" value="Adicionar "> </td>
<td><input type="Submit" value="Adicionar "> </td>
<td><input type="Submit" value="Adicionar "> </td>
</tr>
</table>

<table> 
<tr>
<th>Donut Sabor</th> 
<th>Donut Sabor</th> 
<th>Donut Sabor</th> 
</tr>
<tr> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
</tr> 
<tr> 
<td>R$ 0,00</td> 
<td>R$ 0,00</td> 
<td>R$ 0,00</td>  
</tr>
<tr>
<td><input type="Submit" value="Adicionar "> </td>
<td><input type="Submit" value="Adicionar "> </td>
<td><input type="Submit" value="Adicionar "> </td>
</tr>
</table>


<table> 
<tr>
<th>Donut Sabor</th> 
<th>Donut Sabor</th> 
<th>Donut Sabor</th> 
</tr>
<tr> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
<td><img src="/public/images/images_sites/donut_exemplo.png"/></td> 
</tr> 
<tr> 
<td>R$ 0,00</td> 
<td>R$ 0,00</td> 
<td>R$ 0,00</td>  
</tr>
<tr>
<td><input type="Submit" value="Adicionar "> </td>
<td><input type="Submit" value="Adicionar "> </td>
<td><input type="Submit" value="Adicionar "> </td>
</tr>
</table> -->

%{int quebraDeLinha=0;}%
<table >
#{list items:donuts, as:'donut'}
   
    

     #{if quebraDeLinha==0}<tr>#{/if}
     %{ quebraDeLinha++ }%
      <td>
      <div>
      <a   href=donut.getUrlImagem()> <img   src= ${donut.getUrlImagem()} width="140px" height="140px"> </a><br>
      <a href=@{Application.detalhes_produto(donut.getNome())}> ${donut.getNome()}</a> <br>
      <var align="left">${String.format("R\$ %.2f",donut.getPreco())} </var>
      <form action=@{Application.detalhes_produto()}>
            <input type="hidden" name= "nome" value= ${donut.getNome()} style="position:relative;top:500px;">
            <input type="submit" value="adicionar ao carrinho"> 
      </form>
      <div>
      <td>
      #{if quebraDeLinha==3} </tr>%{quebraDeLinha=0}%  #{/if}
      

#{/list} 
 </table>